{% extends 'base.html' %}
{% load staticfiles %}
{% block title %}登录{% endblock title %}
{% block topfiles %}
    <link rel="icon" href="/static/img/logo.png" type="image/x-icon">
    <link rel="stylesheet" type="text/css" href={% static  "css/bootstrap.css" %}>
    <link rel="stylesheet" type="text/css" href={% static  "js/bootstrap.js" %}>
    <link rel="stylesheet" type="text/css" href={% static  "js/bootstrapValidator.min.js" %}>
    <script type="text/javascript" src={% static "js/jquery-1.12.4.min.js" %}></script>
    <script type="text/javascript" src={% static  "js/jquery-ui.min.js" %}></script>
    <script type="text/javascript" src={% static  "js/slide.js" %}></script>
    <script type="text/javascript" src={% static  "js/register.js" %}></script>
    <style type="text/css">
        .form-group {
            margin-bottom: 2rem;
        }

        .welcome, .login_info, .login_btn, .user_link {
            line-height: 40px;
            color: white;
        }

        .login_info {
            display: none;
        }

        .login_info em {
            color: #ff8800
        }

        .login_btn a, .user_link a {
            color: white;
        }

        .login_btn a:hover, .user_link a:hover {
            color: #ff8800;
        }

        .login_btn span, .user_link span {
            color: #cecece;
            margin: 0 10px;
        }

        .form-signin {
            max-width: 380px;
            padding: 15px;
            margin: 0 auto;
            border-radius: 10px;
        }

        .form-signin .form-signin-heading,
        .form-signin .checkbox {
            margin-bottom: 10px;
        }

        .form-signin .checkbox {
            font-weight: normal;
        }

        .form-signin .form-control {
            position: relative;
            height: auto;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            padding: 10px;
            font-size: 16px;
        }

        .form-signin .form-control:focus {
            z-index: 2;
        }

        .form-signin .bottom-ten {
            border-top-left-radius: 0px;
            border-top-right-radius: 0px;
        }

        .btn {
            margin-top: 10px;
        }

        .form-signin input[name="password"] {
            margin-bottom: 10px;
        }

        .form-group {
            margin-bottom: 2rem;
        }

        .container {
            position: relative; /* 设置为相对定位 */
            height: 100vh; /* 高度铺满视口 */
            display: flex; /* 水平居中 */
            justify-content: center; /* 水平居中 */
            align-items: center; /* 垂直居中 */
        }

        .form-signin {
            position: absolute; /* 设置为绝对定位 */
            top: 50%; /* 上边界与父元素顶部之间的距离为自身高度的一半 */
            left: 50%; /* 左边界与父元素左侧之间的距离为自身宽度的一半 */
            transform: translate(-50%, -50%); /* 根据自身尺寸进行微调，使得DIV完全居中 */
            width: 500px; /* 设置DIV的宽度 */
            padding: 20px; /* 添加内边距 */
            background-color: #f9f9f9; /* 设置背景色 */
            border: 1px solid #ccc; /* 设置边框样式 */
            box-shadow: 0 0 4px rgba(0, 0, 0, 0.2); /* 添加阴影效果 */
        }

        .container2 {
            position: relative; /* 设置为相对定位 */
            display: flex; /* 水平居中 */
        {#justify-content: center; /* 水平居中 */ align-items: center; /* 垂直居中 */#}
        }

        .image {
            position: absolute; /* 设置img为绝对定位 */
            top: 10px; /* 调整图片与顶边的间距 */
        {#right: 10px;#} left: 200%; /* 水平居中 */
            transform: translateX(400%); /* 水平居中 */
            z-index: 999; /* 提高z-index值，使得图片处于最前面 */
            height: 80px;
        }

        .image2 {
            position: absolute; /* 设置img为绝对定位 */
            top: 28%; /* 调整图片与顶边的间距 */
            left: 50%; /* 水平居中 */
            transform: translate(-50%, -50%); /* 水平居中 */
            font-family: "LiSu";
            color: white;
            font-size: 55px;
        }

        .container3 {
            position: relative; /* 设置为相对定位 */
            height: 100vh;
            display: flex; /* 水平居中 */
            justify-content: center; /* 水平居中 */
            align-items: center; /* 垂直居中 */

        }


    </style>
{% endblock topfiles %}
{% block body %}

    <div class="main-header"
         style="display: flex;overflow:hidden;
                 background: linear-gradient(
                 rgba(42, 47, 52, 0.60),
                 rgba(42, 47, 52, 0.85) 35%,
                 rgba(42, 47, 52, 0.85) 75%,
                 rgba(42, 47, 52, 0.60) 100%
                 ),url({% static 'images/background.png' %});
                 background-size: cover;
                 background-attachment: fixed;
                 height: calc(100% - 42px);
                 position: relative;
                 ">

        <div class="container2">
            <img class="image" src="/static/img/login2.png"/>
        </div>




        <div class="container">
{#             <img class="image2" src="/static/img/login2.png"/>#}
            <span class="image2">X线影像智能诊断系统</span>
            <form method="post" class="form-signin">
                {% csrf_token %}
                <h2 class="form-signin-heading">用户登录</h2>
                <input type="text" name="username" autofocus="" class="form-control" placeholder="用户名" maxlength="50"
                       autocapitalize="none" autocomplete="username" required="" id="id_username">
                <div class="user_error"></div>
                <br>
                <input type="password" name="pwd" class="form-control" placeholder="密码" required="" id="id_password">
                <div class="pwd_error"></div>
                <input type="hidden" name="next" value="">
                <div class="checkbox">
                    <label><input type="checkbox" name="remember" id="id_remember">记住密码</label><a href="#"
                                                                                                  style="float:right">忘记密码</a>
                </div>
                <button id="login" class="btn btn-lg btn-primary btn-block" type="submit">登录</button>
                <span style="color:red">{{ errmsg }}</span>
            </form>
        </div>
    </div>
{% endblock body %}
